/**
 * @description  : 标签集 选择器
 * @descriptionDetail : 标签集 选择器
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-04 18:57:47
 */
<template>
  <view>
    <view class="uni-flex mc-choice-btn-group">
      <u-button
        shape="square"
        hover-class="none"
        size="medium"
		:hairLine="true"
        :disabled="isDisabled"
        :custom-style="customStyle"
        plain
        :type="btn.isChoice?choiceType:normalType"
        throttle-time="150"
        v-for="(btn, index) in btnList"
        :key="btn.code"
        @click="btnClick(index)"
      >
        {{ btn.name }}
      </u-button>
    </view>
  </view>
</template>
<!--
btnList 数据结构：
 btnList = [
 {
 "code":"1", //保证唯一的字符串
 "name":"身份证", //按钮显示名称
 "isChoice":false, //是否选中
 "obj":{} , //数据实体对象
 }
 ]
 single:  是否是单选
 choiceType/normalType: default(默认)、primary、success、info、warning、error
 tapListener: 监听每次点击按钮后的选中数据集
 -->
<script>
import util from "@/common/util.js"
export default {
  name: 'ChoiceTag',
  props: {
    btnList: {
      type: Array,
      default: undefined,
    },
    single: {
      type: Boolean,
      default: true,
    },
    choiceType: {
      type: String,
      default: "primary",
    },
    normalType: {
      type: String,
      default: "default",
    },
    tapListener: {
      type: Function,
      default: function(arr) {},
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default () {
        return {};
      },
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    allowEmptyChoice: { // 是否可以空选
      type: Boolean,
      default: true, //
    },
  },
  methods: {
    btnClick: function(index) {
      let flag = !this.btnList[index].isChoice;
      if (!this.single || !flag) {
        if (!this.single && !flag && !this.allowEmptyChoice && this.getChoiceLength() == 1) {
          this.$u.toast('至少选择一项');
        } else {
          this.btnList[index].isChoice = flag;
        }
        this.getChoiceData(this.btnList[index]);
        return;
      }
      this.btnList[index].isChoice = flag;
      for (let i = 0; i < this.btnList.length; i++) {
        if (i != index) {
          this.btnList[i].isChoice = false;
        }
      }
      this.getChoiceData(this.btnList[index]);
    },
    getChoiceData: function(tapObj) {
      let list = new Array();
      for (let i = 0; i < this.btnList.length; i++) {
        if (this.btnList[i].isChoice) {
          list.push(this.btnList[i]);
          if (this.single) break;
        }
      }
      this.tapListener(list, tapObj);
    },
    getChoiceLength() {
      return this.btnList.filter(itm => {
        return itm.isChoice;
      }).length;
    },
	//重置数据
	resetState(){
	  if(!this.btnList) return;
	  for (let i = 0; i < this.btnList.length; i++) {
	    this.btnList[i].isChoice = false;
	  }
	},
  },
}
</script>

<style lang="scss" scoped>
	.uni-flex {
		display: flex;
		flex-direction: row;
	}

	.mc-choice-btn-group {
		padding: 5rpx 20rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10px;
		margin-bottom: -5px;
	}

	.u-btn--primary {
		background: url(../static/icon_checked.png) no-repeat right bottom;
		background-size: 20px;
		z-index: 99;
		transition: none;
	}
</style>
